<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/cart.css">
</head>
<body>
  <h1>我是一个购物车页面</h1>

  <div class="container"></div>
</body>
</html>

<script src="../tools/jquery.min.js"></script>
<script>
  // 调用函数 动态渲染生成页面
  setPage();

  // 点击效果 必须是 事件委托完成
  $('.container').click(function(e){
    // 获取 localStorage 中 cart 存储的数据信息
    const cart = JSON.parse( localStorage.cart );
    console.log( cart );

    // 点击的是全选按钮
    if( e.target.getAttribute('name') === 'all' ){
      // 循环遍历 数组中的数据 buy 属性 属性值 设定为 
      // 全选按钮 checked 属性值
      cart.forEach( function(item){
        item.buy = e.target.checked ;
      })
    
    // 点击的是 其他input按钮
    }else if( e.target.getAttribute('name') === 'other' ){
      // 获取 点击标签 goods_id 属性存储的属性值 
      // 类型是字符串类型

      // js操作语法
      // let goods_id = e.target.getAttribute( 'goods_id' );
      // jQuery操作语法
      let goods_id = $(e.target).attr('goods_id');
      console.log( goods_id );

      // 循环遍历数组 
      // i 是 索引下标 cart[i] 是 对象 cart[i].buy 是 购买状态  cart[i].goods_id 是 存储商品的 id值
      for( let i = 0 ; i <= cart.length-1 ; i++ ){
        // 如果存储商品的id 和 点击要修改的商品的id相同 
        // 证明是 要修改的商品
        if( cart[i].goods_id === goods_id ){
          // js的语法
          cart[i].buy = e.target.checked;
          // jQuery的语法
          cart[i].buy = $(e.target).prop('checked');

          // 修改之后 终止循环 
          break;
        }

      }

    // 点击的是 我不要了按钮
    }else if( e.target.getAttribute('name') === 'del' ){
      // 获取 点击标签,存储的goods_id
      // 找到数组中 goods_id 相同的 对象单元 
      // 删除 数组中 这个 对象单元
      // 将新的数组写入 localStorage 
      // 根据新的 localStorage 重新渲染生成页面
      let goods_id = e.target.getAttribute('goods_id');
      
      for( let i = 0 ; i <= cart.length-1 ; i++ ){
        if( cart[i].goods_id === goods_id ){
          // 根据 索引下标 删除 数组cart 中的一个单元
          cart.splice( i , 1 );
          // 删除结束 终止循环
          break;
        }
      }

    // 点击的是 加号按钮
    }else if( e.target.getAttribute('name') === '+' ){
      // 获取 点击标签 存储 的 goods_id 属性值
      // 根据 goods_id 找到 数组中 对应的 对象
      // 给 购买数量数值 累加1
      // 将 新的数组转化为 json字符串 写入 localStorage 的 cart 中
      // 根据新的 localStorage 动态渲染生成新的页面
      let goods_id = e.target.getAttribute('goods_id');

      for( let i = 0 ; i <= cart.length-1 ; i++ ){
        if ( cart[i].goods_id === goods_id ) {
          // 购买数量 累加1
          cart[i].num++ ;
          // 终止之后的循环
          break;
        }
      }
    

    // 点击的是 减号按钮
    }else if( e.target.getAttribute('name') === '-' ){
      // 获取 点击标签 存储 的 goods_id 属性值
      // 根据 goods_id 找到 数组中 对应的 对象
      // 给 购买数量数值 累减1
      // 将 新的数组转化为 json字符串 写入 localStorage 的 cart 中
      // 根据新的 localStorage 动态渲染生成新的页面
      let goods_id = e.target.getAttribute('goods_id');

      for( let i = 0 ; i <= cart.length-1 ; i++ ){
        if ( cart[i].goods_id === goods_id ) {
          // 购买数量 累减1
          cart[i].num-- ;
          // 终止之后的循环
          break;
        }
      }
    }


    // 将 新数组以json字符串形式 存储给 localStorage 的 cart
    localStorage.cart = JSON.stringify( cart );
    // 再次调用函数 动态渲染生成页面
    setPage();
  })

  

  // 定义函数动态生成页面
  function setPage(){
    // 实际项目中 应该根据 数据库中 购物车数据 动态渲染生成页面
    // 目前是 根据 localStorage 中 cart 存储的数据 动态渲染生成页面
    
    // 获取 localStorage 中的数据 
    let cart = localStorage.cart ;

    // 定义变量存储 购买商品的种类 数量 价格
    let type = 0;
    let num = 0;
    let money = 0 ;

    // 如果 cart 是 undefined 证明 没有创建购物车
    // 生成 没有创建购物车 对应的页面内容
    if( cart === undefined ){
      $('.container').html('<h1>您还没有购物记录,请您先去购物</h1>');
    
    // 有 cart 购物记录
    }else{
      // cart 存储的 json字符串 转化为 对应的数据结构 数组中存储对象
      cart = JSON.parse( cart );

      if( cart.length === 0 ){
        // 如果 cart 数组 length 是 0 
        // 生成对应的 空页面内容
        $('.container').html('<h1>您的购物车已经被好心人清空了,您可以继续购物</h1>');        
      
      }else{
        // 定义变量 存储 其他input标签的选中效果
        let bool = true;

        // 如果 cart 数组 length 不是 0
        // 证明 有 购物车商品信息 对应生成页面内容

        // 1, 生成 li标签之前的内容
        let str = `
          <h1 name="type"></h1>
          <h1 name="num"></h1>
          <h1 name="money"></h1>

          <div class="panel panel-info ">
            <div class="panel-body bg-info">
              <div class="checkbox">
                <label>
                  <input name="all" type="checkbox" value="">
                  全选
                </label>
              </div>
            </div>
            <div class="panel-footer">
              <ul class="cart-list">
        
        `;

        // 2, 根据 localStorage 中 cart 存储的数据 动态渲染生成li标签
        cart.forEach(function(item,key){
          // 如果有其他input标签 选中属性 结果是 false
          if( item.buy === false ){
            // 全选input标签 选中属性 也是赋值false
            bool = false;
          }else{
            // 选中状态 计算 购买 商品种类 数量 价格
            type++ ;
            num += item.num;
            money += item.num * Number( item.goods_price ); 
          }

          str += `
              <li class="cart-item">
                <div class="left">
                  <input type="checkbox" name="other" goods_id="${item.goods_id}" ${ item.buy ? 'checked' : '' }>
                </div>
                <div class="right">
                  <div class="media">
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" src="${item.goods_small_logo}" alt="...">
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">${item.goods_name}</h4>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                      </p>
                      <div class="btn-group pull-right" role="group" aria-label="...">
                        <button name="-" goods_id="${item.goods_id}" type="button" ${ item.num === 1 ? 'disabled' : ''}  class="btn btn-default">-</button>
                        <button type="button" class="btn btn-default" disabled>${item.num}</button>
                        <button name="+" goods_id="${item.goods_id}" type="button" ${ item.num === Number(item.goods_number) ? 'disabled' : '' }  class="btn btn-default">+</button>
                      </div>
                      <button name="del" goods_id="${item.goods_id}" class="del btn btn-danger">我不要了</button>

                    </div>
                  </div>
                </div>
              </li>
          `;
        })

        


        // 3, 生成 li标签之后的内容
        str += `
              </ul>
            </div>
          </div>
        `;

        // 4, 生成的字符串写入标签
        $('.container').html( str );

        // 5, 设定 全选input标签的属性值
        $('[name="all"]').prop( 'checked' , bool );
        // 6, 设定购买商品 种类 数量 价格
        $('[name="type"]').html(`您一共购买了${type}种商品`);
        $('[name="num"]').html(`您一共购买了${num}件商品`);
        $('[name="money"]').html(`您一共需要支付${money.toFixed(2)}元`);
      }
    }
  }

</script>

<script>
  /*
    1,  设定函数 动态生成页面
      定义变量 存储 原始值 准备给 全选标签赋值 默认值是 true
      定义变量准备存储 购买商品 种类 件数 总价格

      获取 localStorage 中 cart 存储的数
        如果是 undefined 证明 还没有创建购物车
          直接生成对应的空白页面

        如果不是 undefined 证明 已经创建了购物车
          将 存储的数据转化为对应的数据结构
          数据结构的结果是 数组中 存储对象 
          每一个对象是 一个商品信息

          判断 数组的长度 
            如果是 0 证明是 空数组 没有商品数据
            生成对应的空白页面

            如果 长度不是 0 证明有数据信息
            循环遍历数组 动态生成页面 内容

            li之前的是固定部分

            动态循环遍历 生成 li标签 
              如果 有 数据的buy属性 是 false 
                给 变量赋值 false
              如果 有 数据的buy属性 是 true
                累加计算 购买商品的 种类 件数 总价格

            li之后的是固定部分

          将结果 写入 标签
            根据变量储存的结果 
            赋值设定 全选input标签 checked 属性值

            
    2,  设定点击事件
      动态生成的标签对象 通过事件委托 添加事件
      
      如果点击的是全选
        循环遍历 cart 数组中的所有数据
        赋值 buy属性值 是 全选标签checked属性值

      如果点击的是其他input标签
        获取点击标签的index属性值 也就是 对应 数组中对象的 索引下标
        根据索引下标 找到对应的 数组单元 赋值 buy属性
    
      如果点击的是 + 加号标签
        获取点击标签的index属性值 也就是 对应 数组中对象的 索引下标
        根据索引下标 找到对应的 数组单元 赋值 num属性值累加1

      如果点击的是 - 减号标签
        获取点击标签的index属性值 也就是 对应 数组中对象的 索引下标
        根据索引下标 找到对应的 数组单元 赋值 num属性值累减1

      如果点击的是 我不要了 标签
        获取点击标签的index属性值 也就是 对应 数组中对象的 索引下标
        根据索引下标 从索引下标开始 删除 cart数组中 一个数据单元

      将新的 cart数组 赋值给 localStorage 存储
      调用函数 再次动态刷新生成页面
      

    点击效果的本质
      表面效果是 修改页面中的显示内容
      本质是 修改数据库数据 再根据新的数据 动态渲染生成新的页面

    目前是 本地的localStorage 中 存储数据
    数组单元个数 和 标签个数 是 一一对应的
    可以 根据 索引下标 找到对应的数据修改

    实际项目中 是直接修改数据库中的数据
    使用 goods_id 找到对应的数据 进行修改
  */
</script>


<!-- 


            

              




-->
